<template>
	<view>
		<view class="top_one">
			<image class="top_bcg" src="/static/yq1.png" mode=""></image>
			<image class="top_text" src="/static/yq.png" mode=""></image>
			<view class="right_text" @click="$pageGo('/mypage/usertabbar/trialMembership')">申请名额</view>
			<view class="t flex_jc_sb">
				<view class="t1">可用名额：{{ num }}</view>
				<view class="t2" v-if="num != 0">立即邀请</view>
				<button class="zf_btns" open-type="share"></button>
			</view>
		</view>
		<view class="top_fixed flex">
			<view class="itm" v-for="(item, index) in data.tabbarList" :key="index" :class="data.activeName == item.name ? 'actitm' : ''" @click="tabbarChange(item)">
				{{ item.name }}
			</view>
		</view>
		<loadstatusVue :status="data.loadStatus">
			<view class="content">
				<view class="" v-if="data.activeName == '使用列表'">
					<view class="items flex_jc_sb" v-for="(item, index) in data.list" :key="index">
						<view class="items_l flex">
							<image v-if="item.img" :src="item.img" mode="aspectFill"></image>
							<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
							<view class="">
								<view class="t1">{{ item.name }}</view>
								<view class="t2">{{ item.createTime }}</view>
							</view>
						</view>
						<view class="items_r">
							<view class="btn">{{ item.vip == 1 ? '未转化' : '已转化' }}</view>
							<view class="t3" v-if="item.vip == 2">
								<span>转化时间：{{ item.vipTimeFirstPay }}</span>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="data.activeName == '申请列表'">
					<view class="items1" v-for="(item, index) in data.list" :key="index">
						<view class="tone flex_jc_sb">
							<view class="t1">申请体验会员：{{ item.applyCount }}</view>
							<view class="t2" :class="`zt-${$formatStatus(item.verifyStatus)}`">
								{{ item.verifyStatus }}
							</view>
						</view>
						<view class="ttwo">备注：{{ item.applyDesc }}</view>
						<view class="time">{{ item.applyTime }}</view>
						<view class="yy" v-if="item.verifyStatus == '已驳回'">驳回原因：{{ item.verifyDesc }}</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { getVipList } from '@/api/branch/trialMembership.js';
import { getUserInfo } from '@/api/branch/userwechat.js';
const data = reactive({
	tabbarList: [
		{
			name: '使用列表',
			url: '/mini/vip/receive/list'
		},
		{
			name: '申请列表',
			url: '/mini/group/apply/list'
		}
	],
	activeName: '使用列表',
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		url: '',
		pageNum: 1,
		pageSize: 10
	}
});
const tabbarChange = (obj) => {
	data.activeName = obj.name;
	data.queryParams.url = obj.url;
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await getVipList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const num = ref(0);
const loadMore = () => {
  if (data.isLoading || !data.hasMore) {
    return false;
  }
  
  data.queryParams.pageNum++;
  getList(true); // 传递 true 表示是加载更多
  
  return true;
};
defineExpose({
	loadMore
});
onMounted(() => {
	uni.$off('updategetVipList');
	uni.$on('updategetVipList', function (data) {
		getList();
	});
	data.queryParams.url = data.tabbarList[0].url;
	getList();
	getUserInfo().then((res) => {
		if (res.code == 200) {
			num.value = res.data.inviteCount;
		}
	});
});
</script>

<style lang="scss" scoped>
.top_one {
	width: 710rpx;
	height: 200rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 0rpx auto;
	position: relative;
	.t {
		height: 80rpx;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		.zf_btns {
			width: 126rpx;
			height: 56rpx;
			position: absolute;
			right: 20rpx;
			opacity: 0.1;
		}
		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
		}
		.t2 {
			width: 126rpx;
			height: 56rpx;
			background: #b19561;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #ffffff;
			line-height: 56rpx;
			text-align: center;
		}
	}
	.top_bcg {
		width: 710rpx;
		height: 120rpx;
		display: block;
	}
	.top_text {
		width: 324rpx;
		height: 68rpx;
		position: absolute;
		top: 22rpx;
		left: 36rpx;
	}
	.right_text {
		width: 128rpx;
		height: 48rpx;
		background: #75613e;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #ffffff;
		text-align: center;
		line-height: 48rpx;
		position: absolute;
		top: 36rpx;
		right: 0rpx;
	}
}
.top_fixed {
	width: 750rpx;
	height: 70rpx;
	background: #f3f0e8;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	position: sticky;
	top: 70rpx;
	z-index: 3;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.itm {
		width: 112rpx;
		height: 36rpx;
		background: #f3f0e8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1px solid #b1b1b1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #b1b1b1;
		line-height: 36rpx;
		text-align: center;
		margin-right: 30rpx;
	}
	.actitm {
		color: #b19561;
		background: #f3f0e8;
		border: 1px solid #b19561;
	}
}
.content {
	.items {
		width: 710rpx;
		height: 112rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 0rpx auto 20rpx;
		.items_l {
			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 40rpx;
				margin-right: 18rpx;
			}
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
			}
			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #aeaeac;
				margin-top: 8rpx;
			}
		}
		.items_r {
			text-align: right;
			.btn {
				width: 100rpx;
				height: 40rpx;
				background: #f4f4f4;
				border-radius: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #b1b1b1;
				text-align: center;
				line-height: 40rpx;
				display: inline-block;
			}
			.t3 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #aeaeac;
				margin-top: 8rpx;
				text-align: right;
				height: 28rpx;
			}
		}
	}
	.items1 {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 0rpx auto 20rpx;
		.tone {
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
			}
			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #892b1b;
			}
		}
		.ttwo {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #75613e;
			margin-top: 8rpx;
		}
		.time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #aeaeac;
			margin-top: 8rpx;
		}
		.yy {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #892b1b;
			margin-top: 15rpx;
		}
	}
}
</style>
